<template>
  <div :class="classes" :style="wrapStyles">
    <transition-group :name="transitionName" appear>
      <Notice
        v-for="notice in notices"
        :key="notice.name"
        :prefix-cls="prefixCls"
        :styles="notice.styles"
        :type="notice.type"
        :content="notice.content"
        :duration="notice.duration"
        :render="notice.render"
        :has-title="notice.hasTitle"
        :withIcon="notice.withIcon"
        :closable="notice.closable"
        :name="notice.name"
        :transition-name="notice.transitionName"
        :background="notice.background"
        :msg-type="notice.msgType"
        :on-close="notice.onClose">
      </Notice>
    </transition-group>
  </div>
</template>
<script>
import Notice from './notice.vue';

import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';

const prefixCls = 'haloe-notification';
let seed = 0;
const now = Date.now();

function getUuid () {
  return 'haloeNotification_' + now + '_' + (seed++);
}

export default {
  components: { Notice },
  props: {
    prefixCls: {
      type: String,
      default: prefixCls
    },
    styles: {
      type: Object,
      default: function () {
        return {
          top: '65px',
          left: '50%'
        };
      }
    },
    content: {
      type: String
    },
    className: {
      type: String
    },
    transitionName: {
      type: String
    }
  },
  data () {
    return {
      notices: [],
      tIndex: this.handleGetIndex()
    };
  },
  computed: {
    classes () {
      return [
        `${this.prefixCls}`,
        {
          [`${this.className}`]: !!this.className
        }
      ];
    },
    wrapStyles () {
      let styles = Object.assign({}, this.styles);
      styles['z-index'] = 1010 + this.tIndex;

      return styles;
    }
  },
  methods: {
    add (notice) {
      const name = notice.name || getUuid();

      let _notice = Object.assign({
        styles: {
          right: '50%'
        },
        content: '',
        duration: 1.5,
        closable: false,
        name: name
      }, notice);

      this.notices.push(_notice);
      this.tIndex = this.handleGetIndex();
    },
    close (name) {
      const notices = this.notices;
      for (let i = 0; i < notices.length; i++) {
        if (notices[i].name === name) {
          this.notices.splice(i, 1);
          break;
        }
      }
    },
    closeAll () {
      this.notices = [];
    },
    handleGetIndex () {
      transferIncrease();
      return transferIndex;
    }
  }
};
</script>
